<template>
  <AppHeader/>
  <div class="container mx-auto px-4 py-6">
    <main class="space-y-6">
      <!-- 状态卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- 设备状态卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <div class="bg-gradient-to-r from-blue-50 to-blue-100 px-6 py-4">
            <div class="flex justify-between items-center">
              <h2 class="text-xl font-bold text-gray-700">设备状态</h2>
              <div class="flex items-center space-x-2">
                <span class="w-3 h-3 rounded-full animate-pulse"
                      :class="monitorStatus.isRunning ? 'bg-green-400' : 'bg-gray-400'">
                </span>
                <span class="text-gray-600 text-sm">
                  {{ monitorStatus.isRunning ? '运行中' : '已停止' }}
                </span>
              </div>
            </div>
          </div>

          <div class="p-6">
            <div class="grid grid-cols-2 gap-6">
              <div class="status-item">
                <div class="text-gray-500 text-sm mb-1">当前操作</div>
                <div class="text-gray-800 font-medium">{{ runStatus.currentOperation }}</div>
              </div>
              <div class="status-item">
                <div class="text-gray-500 text-sm mb-1">工作工位</div>
                <div class="text-gray-800 font-medium">工位 {{ runStatus.workStation }}</div>
              </div>
              <div class="status-item">
                <div class="text-gray-500 text-sm mb-1">当前圈数</div>
                <div class="text-gray-800 font-medium">{{ runStatus.turns }}</div>
              </div>
              <div class="status-item">
                <div class="text-gray-500 text-sm mb-1">目标圈数</div>
                <div class="text-gray-800 font-medium">{{ runStatus.targetTurns }}</div>
              </div>
              <div class="status-item">
                <div class="text-gray-500 text-sm mb-1">绕线张力</div>
                <div class="text-gray-800 font-medium">{{ runStatus.tension }} N</div>
              </div>
              <div class="status-item">
                <div class="text-gray-500 text-sm mb-1">循环次数</div>
                <div class="text-gray-800 font-medium">{{ runStatus.cycle }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 报警状态卡片 -->
        <div v-if="alarmStatus.hasActiveAlarms"
             class="bg-white rounded-xl shadow-sm overflow-hidden">
          <div class="bg-gradient-to-r from-red-50 to-red-100 px-6 py-4">
            <div class="flex justify-between items-center">
              <h2 class="text-xl font-bold text-gray-700">报警信息</h2>
              <div class="flex items-center space-x-2">
                <span class="w-3 h-3 bg-red-400 rounded-full animate-pulse"></span>
                <span class="text-gray-600 text-sm">
                  有{{ alarmStatus.alarms.length }}个激活的报警
                </span>
              </div>
            </div>
          </div>

          <div class="p-6">
            <div class="space-y-4">
              <div v-for="alarm in alarmStatus.alarms"
                   :key="alarm.id"
                   class="bg-red-50 rounded-lg p-4">
                <div class="flex justify-between items-start">
                  <div class="flex-1">
                    <div class="text-red-600 font-medium">{{ alarm.type }}</div>
                    <div class="text-gray-600 mt-1">{{ getAlarmMessage(alarm) }}</div>
                  </div>
                  <div class="text-sm text-gray-500">
                    {{ formatTime(alarm.timestamp) }}
                  </div>
                </div>
              </div>
            </div>

            <div class="flex justify-end space-x-4 mt-6">
              <button @click="acknowledgeAllAlarms"
                      class="px-4 py-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-colors">
                确认所有报警
              </button>
              <button @click="goToAlarmLog"
                      class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors">
                查看报警日志
              </button>
            </div>
          </div>
        </div>

        <!-- 生产统计卡片 -->
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
          <div class="bg-gradient-to-r from-green-50 to-green-100 px-6 py-4">
            <h2 class="text-xl font-bold text-gray-700">生产统计</h2>
          </div>

          <div class="p-6">
            <div class="grid grid-cols-2 gap-6">
              <div class="text-center">
                <div class="text-3xl font-bold text-gray-700">
                  {{ statsData.totalProduction }}
                </div>
                <div class="text-gray-500 mt-2">总产量</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-gray-700">
                  {{ statsData.cycleTime }}
                </div>
                <div class="text-gray-500 mt-2">周期时间(秒)</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-gray-700">
                  {{ statsData.utilization }}%
                </div>
                <div class="text-gray-500 mt-2">设备利用率</div>
              </div>
              <div class="text-center">
                <div class="text-3xl font-bold text-gray-700">
                  {{ formatUptime(statsData.uptime) }}
                </div>
                <div class="text-gray-500 mt-2">运行时间</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作控制面板 -->
      <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4">
          <h2 class="text-xl font-bold text-gray-700">操作控制</h2>
        </div>

        <div class="p-6">
          <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import {ref} from 'vue';
// 监控状态
const monitorStatus = ref({
  isRunning: false,
  activeMonitors: []
});

// 运行状态数据
const runStatus = ref({
  currentOperation: '绕线中',
  workStation: 1,
  turns: 0,
  targetTurns: 100,
  tension: 5.2,
  cycle: 1
});

// 报警状态数据
const alarmStatus = ref({
  hasActiveAlarms: false,
  alarms: []
});

// 生产统计数据
const statsData = ref({
  totalProduction: 0,
  cycleTime: 0,
  utilization: 0,
  uptime: 0
});

// 获取报警消息
function getAlarmMessage(alarm) {
  return alarm.message || '未知报警';
}

// 确认所有报警
function acknowledgeAllAlarms() {
  // 实现确认所有报警的逻辑
  alarmStatus.value.hasActiveAlarms = false;
  alarmStatus.value.alarms = [];
}

// 跳转到报警日志页面
function goToAlarmLog() {
  router.push('/alarm-log');
}

function formatUptime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  return `${hours}h ${minutes}m`;
}

function formatTime(timestamp) {
  return new Date(timestamp).toLocaleTimeString();
}
</script>

<style scoped>
.container {
  max-width: 1400px;
}

@media (max-width: 768px) {
  .container {
    padding: 1rem;
  }
}
</style>
